<template>
  <div>
    <!-- 模糊查询框 -->
    <br>
    <div align="center">
      <h1>报税系统</h1>
    </div>
    <br>
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline" align="center">
      <el-form-item label="产品名字" prop="productName">
        <el-input size="small" clearable v-model="keyword.productName" placeholder="产品名字"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-input size="small" clearable v-model="keyword.status" placeholder="状态"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="search" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')"
                   icon="el-icon-refresh"
        >重置
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="success" size="small" @click="openAddDialog" icon="el-icon-plus">添加信息</el-button>
        <el-button type="danger" size="small" @click="deleteBatch" icon="el-icon-delete">批量删除</el-button>
      </el-form-item>
    </el-form>

    <!-- 中间框 -->
    <el-table :data="taxReturnList" border style="width: 100%" :row-class-name="tableRowClassName"
              @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="productName" label="产品名字" align="center">
      </el-table-column>
      <el-table-column prop="productPrice" label="产品单价" align="center">
      </el-table-column>
      <el-table-column prop="salesTotal" label="销售总额" align="center">
      </el-table-column>
      <el-table-column prop="taxRate" label="税率" align="center">
      </el-table-column>
      <el-table-column prop="taxDue" label="税费" align="center">
      </el-table-column>
      <el-table-column prop="attachment" label="附件" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == '审核通过' ? '' : 'danger'">
            <span>{{ scope.row.status == '审核通过' ? '审核通过' : '未审核' }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="change1(scope.row)">修改</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete"
                     @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <!-- 添加对话框 -->
    <el-dialog title="添加" :visible.sync="dialogAdd" width="30%">
      <el-form ref="taxReturnRulesForm" :model="taxReturn" :rules="taxReturnRules" label-width="80px">
        <el-form-item label="产品名字" prop="productName">
          <el-input v-model="taxReturn.productName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="productPrice">
          <el-input v-model="taxReturn.productPrice" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售总额" prop="salesTotal">
          <el-input v-model="taxReturn.salesTotal" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <el-input v-model="taxReturn.attachment" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="税率" prop="taxRate">
          <el-radio-group v-model="taxReturn.taxRate">
            <!--标签中间的是,对外展现的,label中的Y是表单数据,发给后端的-->
            <el-radio label="0.06">6%</el-radio>
            <el-radio label="0.08">8%</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="税费" prop="taxDue">
          <el-input v-model="taxReturn.taxDue" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="status">
          <el-input v-model="taxReturn.status" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addonSubmit('taxReturnRulesForm')">确定</el-button>
        <el-button @click="dialogAdd = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 更新对话框 -->
    <el-dialog title="更新" :visible.sync="dialogUpdate" width="30%">
      <el-form ref="taxReturnRulesForm" :model="taxReturn" :rules="taxReturnRules" label-width="80px">
        <el-form-item label="产品名字" prop="productName">
          <el-input v-model="taxReturn.productName" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="产品单价" prop="productPrice">
          <el-input v-model="taxReturn.productPrice" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="销售总额" prop="salesTotal">
          <el-input v-model="taxReturn.salesTotal" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="附件" prop="attachment">
          <el-input v-model="taxReturn.attachment" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="税率" prop="taxRate">
          <el-radio-group v-model="taxReturn.taxRate">
            <!--标签中间的是,对外展现的,label中的Y是表单数据,发给后端的-->
            <el-radio label="0.06">6%</el-radio>
            <el-radio label="0.08">8%</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="税费" prop="taxDue">
          <el-input v-model="taxReturn.taxDue" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" prop="status">
          <el-input v-model="taxReturn.status" autocomplete="off" style="width:300px"></el-input>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updateonSubmit('taxReturnRulesForm')">确定</el-button>
        <el-button @click="dialogUpdate = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- 页码框 -->
    <br>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
                   :page-sizes="[5, 10, 20]" :page-size="100" align="center" layout="total,sizes,prev,pager,next,jumper"
                   :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
// 导入自己封装的api请求方法
import { getList, deleteById, delBatch, addTaxReturn, change } from '@/api/tax1'

export default {
  name: 'Tax',
  data() {
    return {
      // 遮罩层
      loading: true,
      taxReturnList: [],
      pageNum: 1,
      pageSize: 5,
      currentPage: 1,
      total: 0,
      keyword: {
        productName: null,
        status: null
      },

      ids: [],
      title: '',
      currentPage: 1,
      dialogAdd: false,
      dialogUpdate: false,
      taxReturn: {
        productName: null,
        productPrice: null,
        salesTotal: null,
        status: null,
        taxDue: null,
        taxRate: null,
        attachment: null,
        productId: null
      },
      taxReturnRules: {
        productName: [
          { required: true, message: '产品名字不能为空', trigger: 'blur' }
        ],
        productPrice: [
          { required: true, message: '产品单价不能为空', trigger: 'blur' }
        ],
        salesTotal: [
          { required: true, message: '销售总额不能为空', trigger: 'blur' }
        ],
        taxRate: [
          { required: true, message: '税率不能为空', trigger: 'blur' }
        ],
        taxDue: [
          { required: true, message: '税费不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '审核状态不能为空', trigger: 'blur' }
        ]

      }
    }
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    },
    fetchData() {
      // 组装查询参数
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        productName: this.keyword.productName,
        status: this.keyword.status
      }
      // getList是api/type.js中自己
      getList(params).then(res => {
        let pageInfo = res.data
        this.loading = false
        console.log(res)
        this.taxReturnList = res.data.list
        this.total = pageInfo.total
      })
    },
    // 根据id删除
    handleDelete(row) {
      //console.log(row.productId)
      this.$confirm('是否确认删除单位编号为' + '\'' + row.productId + '\'' + '的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let params = {
          id: row.productId
        }
        deleteById(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '删除失败'
          })
        })
      })
    },
    // 模糊搜索
    search() {
      this.fetchData()
    },
    // 重置表单
    resetSearchForm(formName) {
      this.$refs[formName].resetFields()
      this.fetchData()
    },
    //页面大小改变时触发
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchData()
    },
    //当前页码改变时触发
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchData()
    },
    // 多选框选中数据
    handleSelectionChange(selectionRowArr) {
      this.ids = []
      // console.log(selectionRowArr)
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].productId)
      }
      // console.log("ids",this.ids)
    },
    // 批量删除
    deleteBatch() {
      this.$confirm('是否确认删除单位编号为[' + this.ids + ']的数据项？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let idStr = this.ids.join(',')
        console.log('idStr', idStr)
        let params = {
          ids: this.ids.join(',')
        }
        delBatch(params).then(res => {
          if (res.code == 20000) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 打开添加对话框
    openAddDialog() {
      console.log(this.$refs)
      this.title = '添加'
      this.dialogAdd = true
    },
    // 添加计量单位
    addonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 此处执行添加...
          console.log(this.taxReturn)
          addTaxReturn(this.taxReturn).then(res => {
            this.$message({
              type: 'success',
              message: '添加成功!'
            })
            this.dialogAdd = false
            this.fetchData()
            this.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          return false
        }
        this.dialogAdd = false
      })

    },
    // 打开更新对话框
    change1(row) {
      this.title = '更新'
      this.dialogUpdate = true
      this.taxReturn.productName = row.productName
      this.taxReturn.productPrice = row.productPrice
      this.taxReturn.salesTotal = row.salesTotal
      this.taxReturn.attachment = row.attachment
      this.taxReturn.taxDue = row.taxDue
      this.taxReturn.taxRate = row.taxRate
      this.taxReturn.status = row.status
      this.taxReturn.productId = row.productId
      console.log(row.productId)
    },
    // 更改
    updateonSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // console.log(this.taxReturn)
          change(this.taxReturn).then(res => {
            this.$message({
              type: 'success',
              message: '修改成功!'

            })
            this.dialogUpdate = false
            this.fetchData()
            this.$refs[formName].resetFields()
          })
        } else {
          console.log('error submit!!')
          this.dialogUpdate = false
          return false
        }

      })
    }
  },
  // 生命周期钩子函数(vue对象创建完,自动调用该方法)
  created() {
    this.fetchData()
  }
}

</script>

<style>
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
